/**
 * Copyright(c) 2015 Gxmari007 <392041299@qq.com>
 */
import React ,{Component}from 'react'
import './style.scss'
import PropTypes from 'prop-types';

class  Star extends  Component{
  constructor(props){
    super(props)
    this.state={
       selectIndex:4,
       selectArr:[]
    }
  
    this._onClick=this._onClick.bind(this)

  }
  static propTypes={
    active: PropTypes.bool,
    rank: PropTypes.number,
    onClick: PropTypes.func,
    limit:PropTypes.number,
    label:PropTypes.string
  
  }
  static defaultProps={
    limit:5,
    rank:5,
    active:true
  }
  init(index){
    let selectArr=[];
   
    for(let t=0;t<this.props.limit;t++){
       if(t<=index){
        selectArr.push(true)
       }else{
        selectArr.push(false)
       }
    }

     this.setState({
      selectArr
     })
  }
  componentDidMount(){
     this.init(this.props.limit)
     this.setState({
      selectIndex:this.props.rank-1
     })
  }
  renderItem(selectArr){
   let  starList=[];
    selectArr.map((item,index)=>{
          starList.push(<a
          key={index+"start"}
          className={!item?'star':'active star'}
          onClick={()=>this._onClick(index)}
         >★</a>);
   })
    
    
   return starList
  }
 render () {
   return(
     <div className="star-group">
          <span className="star-label">{this.props.label}</span>
          {this.renderItem(this.state.selectArr)}
          <span className="star-rank">{this.state.selectIndex+1}星</span>
     </div>
     
    );
  }

  _onClick(index) {
    if(this.props.active){
      this.init(index)
      this.setState({
        selectIndex:index,
      })
     this.props.onClick&&this.props.onClick(index);
    }
   
  }


}



export default   Star;
